<template>
	<div>
		
		<!-- 头部 -->
		<p style="font-size: 40px;">实名认证 - 账户类型选择</p><hr>
		
		<!-- 中部 -->
		<div style="position: relative;right: 40px;">
			<div style="float: left;margin-left: 30px;">
				<p style="font-size: 30px;">商业公司</p>				
				<el-button @click="typeId(1)" style="width: 250px;height: 150px;" ><img src="../img/morentx.jpg" style="width: 230px;height: 130px;position: relative;right: 10px;bottom: 3px;"></el-button>
			</div>
			<div style="float: left;margin-left: 30px;">
				<p style="font-size: 30px;">个体工商户</p>
				<el-button @click="typeId(2)" style="width: 250px;height: 150px;"><img src="../img/morentx.jpg" style="width: 230px;height: 130px;position: relative;right: 10px;bottom: 3px;"></el-button>
			</div>
			<div style="float: left;margin-left: 30px;">
				<p style="font-size: 30px;">个人经营</p>
				<el-button @click="typeId(3)" style="width: 250px;height: 150px;"><img src="../img/morentx.jpg" style="width: 230px;height: 130px;position: relative;right: 10px;bottom: 3px;"></el-button>
			</div>
			<div style="float: left;margin-left: 30px;">
				<p style="font-size: 30px;">政府及非营利组织</p>
				<el-button @click="typeId(4)" style="width: 250px;height: 150px;"><img src="../img/morentx.jpg" style="width: 230px;height: 130px;position: relative;right: 10px;bottom: 3px;"></el-button>
			</div>
		</div>
		
		<el-button  @click="smrzsq()" style="width: 95%;margin-top: 25px;margin-left: -10px;" type="danger">认证申请</el-button>
		
		<el-dialog title="实名认证-申请" :visible.sync="dialogFormVisible">
			
		  <el-form :model="smrz" :rules="rules" ref="form">
			  
		    <el-form-item label="真实名称" :label-width="formLabelWidth" prop="realName">
		      <el-input v-model="smrz.realName" autocomplete="off" placeholder="请输入真实名称"></el-input>
		    </el-form-item>
		    
			<el-form-item label="身份证号码" :label-width="formLabelWidth" prop="IDCard">
			  <el-input v-model="smrz.IDCard" autocomplete="off" placeholder="请输入身份证号码"></el-input>
			</el-form-item>
			
									
			
			<el-form-item label="手执身份证照片">
						  <!-- 上传手执身份证照片 -->
						  <el-upload
						    action="http://localhost:8080/upLoadImg"
						    list-type="picture-card"
							:on-success="handleAvatarSuccess"
						    :on-preview="handlePictureCardPreview">
						    <i class="el-icon-plus"></i>
						  </el-upload>
						  <el-dialog :visible.sync="dialogVisible">
						    <img width="100%" :src="IDCardImg" alt="">
						  </el-dialog>
						   <img src="../img/pic.jpg" style="width: 220px;height: 250px;margin-left: 100px;">
			</el-form-item>
						
			
			<el-form-item label="营业执照照片">
						  <!-- 营业执照照片 -->
						  <el-upload
						    action="http://localhost:8080/upLoadImg"
						    list-type="picture-card"
							:on-success="handleAvatarSuccess1"
						    :on-preview="handlePictureCardPreview">
						    <i class="el-icon-plus"></i>
						  </el-upload>
						  <el-dialog :visible.sync="dialogVisible">
						    <img width="100%" :src="tyImg" alt="">
						  </el-dialog>
			</el-form-item>
			
			<el-form-item label="电话号码" :label-width="formLabelWidth" prop="phoneNumber">
			  <el-input v-model="smrz.phoneNumber" autocomplete="off" placeholder="请输入电话号码"></el-input>
			</el-form-item>
			
			<el-form-item label="验证码" :label-width="formLabelWidth" prop="yzm">
			  <el-input v-model="smrz.yzm2" autocomplete="off" placeholder="请输入你从手机号中获得的验证码"></el-input>
			   <el-button type="primary" plain @click="getRandom()">获取验证码</el-button>
			</el-form-item>
			
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="dialogFormVisible = false">取 消</el-button>
		    <el-button type="primary" @click="insertSmrz()">申请完成</el-button>
		  </div>
		</el-dialog>
	</div>
</template>

<script>
	 export default {
	    data() {
			var vphoneNumber = (rule, value, callback) => {
			  if (value === '') {
			    this.$message({
			              showClose: true,
			              message: '错了哦，手机号不能为空！',
			              type: 'error'
			            });
			  }  else {								
			    callback();
			  }};
	      return {
	       dialogFormVisible: false,
		   dialogVisible : false,
				smrz: {
				// 账户类型id
				typeId:'',
				// 用户id
				userId:'',
				// 真实名称
	            realName: '',	
				// 身份证号码
				IDCard:'',
				// 身份证图片
				IDCardImg:'',
				// 类型资质证书
				tyImg:'',
				// 手机号码
				phoneNumber:'',
				// 认证状态
				isRenZheng:'2',
				// 系统验证码
				yzm:'',
				// 用户输入验证码
				yzm2:''
	            },
	            formLabelWidth: '120px',
			rules:{
				realName :[
					{ required: true, message: '请输入真实名称', trigger: 'blur' },
					{ min: 1, max: 11, message: '长度在 3 到 11 个字符', trigger: 'blur' }
				],
				IDCard:[
					{ required: true, message: '请输入身份证号码', trigger: 'blur' },
					{ min: 18, max: 18, message: '长度是 18 个字符', trigger: 'blur' }
				],
				phoneNumber:[
					{ min: 11, max: 11, message: '长度是 11 个字符', trigger: 'blur' },
					{ validator: vphoneNumber, trigger: 'blur' }
				],				
				yzm:[
					{ required: true, message: '请输入验证码', trigger: 'blur' },
				]
			}					
	      }
		  
	    },
		 methods: {
			 // 获取验证码
			 async getRandom(){
			 	var param = new URLSearchParams();
			 	param.append("phone",this.smrz.phoneNumber);
				
				var resRandom =await this.$http.post("yanZhengPhone",param);
			 	this.smrz.yzm = resRandom.data.data
			 	console.log(this.resYanZheng)
			 },
			 //账户类型获取
			   typeId(typeId){
			 	  this.smrz.typeId = typeId
				  // alert(this.smrz.typeId)
			   },
			   // 判断是否账户类型是否有值，没有不让进入下一步
			   smrzsq(){
				   if(this.smrz.typeId!=''){
					   this.dialogFormVisible = true
				   }else{
					   this.$message({
					             showClose: true,
					             message: '请先选择账户类型！',
					             type: 'warning'
					           });
				   }
			   },
			 async insertSmrz(val){
				 this.smrz.userId = window.sessionStorage.getItem("userId")
				 
				 if(this.smrz.typeId!=''&&this.smrz.userId!=''&&this.smrz.realName!=''&&this.smrz.IDCard!=''&&this.smrz.idCardImg!=''&&this.smrz.phoneNumber!=''&&this.smrz.isRenZheng!=''&&this.smrz.yzm2!=''){
					 
					 var param = new URLSearchParams();
					 param.append("typeId",this.smrz.typeId)
					 param.append("userId",this.smrz.userId)
					 param.append("realName",this.smrz.realName)
					 param.append("IDCard",this.smrz.IDCard)
					 param.append("IDCardImg",this.smrz.IDCardImg)
					 param.append("tyImg",this.smrz.tyImg)
					 param.append("phoneNumber",this.smrz.phoneNumber)
					 param.append("isRenZheng",this.smrz.isRenZheng)
					
					 if(this.smrz.yzm2 == this.smrz.yzm){
						var res =await this.$http.post("insertSmrz",param);
						console.log(res.data)
						if(res.data.code==200){
							this.dialogFormVisible = false
							this.user()
						} else {
							this.$message.error("实名认证失败！")
						}
					 }else{
						 this.$message.error('验证码错误,请重新输入！！！')
						 return false;
					 }
					 			 
				 }else{
					 this.$message.error('请填写数据')
				 }			 			 
			 },		   
			  
			  //图片上传
			  async handlePictureCardPreview(file) {
			  			this.smrz.idCardImg = file.url;
			  			this.dialogVisible = true;
			  },
			  //身份证
			  async handleAvatarSuccess(res, file) {
			  			this.smrz.IDCardImg = res.data
			  },
			  //资质
			  async handleAvatarSuccess1(res, file) {
			  			this.smrz.tyImg = res.data
			  },
			  
			//用户界面
			 user(){
			 	this.$router.push('/user')
			 },
		    }
	  }
</script>

<style>
</style>
